<template>
    <div class="total-data">
        <div class="title">实时数据</div>
        <div class="content">
            <div v-for="item in dayData" :key="item.txt" class="item">
                <div class="flex cloum">
                    <div class="text">
                        {{ item.name }}
                    </div>
                    <div class="num">
                        {{ dayDataObj[item.txt]?dayDataObj[item.txt]:0 }}
                    </div>
                </div>
            </div>
        </div>
        <div class="title">累计数据</div>
        <div class="content">
            <div v-for="item in dayData2" :key="item.txt" class="item">
                <div class="flex cloum">
                    <div class="text">
                        {{ item.name }}
                    </div>
                    <div class="num">
                        {{ dayDataObj2[item.txt]?dayDataObj2[item.txt]:0 }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {pageRealTimeData,pageCumulativeData} from '@/api/totalData'
export default {
    data() {
        return {
            dayDataObj:{},
            dayDataObj2:{},
            dayData: [
                { txt: 'newToday', name: "今日新增用户", num: 0 },
                { txt: 'activeToday', name: "今日活跃", num: 0 },
                { txt: 'payToday', name: "充值人数", num: 0 },
                { txt: 'todayPayAmount', name: "今日充值", num: 0 },
                { txt: 'bet', name: "今日下注", num: 0 },
                { txt: 'win', name: "今日返奖", num: 0 },
                { txt: 'RTPToday', name: "今日RTP", num: 0 },
                { txt: 'realTimeOnline', name: "实时在线", num: 0 },
                { txt: 'averageOnline', name: "平均在线", num: 0 },
                { txt: 'maxOnline', name: "最高在线", num: 0 },
            ],
            dayData2: [
                { txt: 'userNum', name: "累积用户", num: 0 },
                { txt: 'touristsNum', name: "游客玩家", num: 0 },
                { txt: 'playerNum', name: "注册玩家", num: 0 },
                { txt: 'payPlayer', name: "付费玩家", num: 0 },
                { txt: 'toPay', name: "累计充值", num: 0 },
                { txt: 'toBet', name: "累计下注", num: 0 },
                { txt: 'toWin', name: "累计返奖", num: 0 },
                { txt: 'toRTP', name: "总RTP", num: 0 },
            ],
        }
    },
    mounted() {
        this.getData();
        this.getData2();

    },
    methods: {
        getData() {
            pageRealTimeData().then(res => {
                if (res.status == 0) {
                    this.dayDataObj = res.data;
                }
            })
        },
        getData2() {
            pageCumulativeData().then(res => {
                if (res.status == 0) {
                    this.dayDataObj2 = res.data;
                }
            })
        },
    }

}
</script>

<style scoped>
.total-data {
    padding: 20px;
}

.title {
    font-size: 20px;
    font-weight: bold;
}

.content {
    padding: 10px 0;
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 10px;
    justify-items: center;
    align-items: stretch;
}

/* 媒体查询，当屏幕宽度小于 768px 时 */
@media (max-width: 768px) {
    .content {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 10px;
    }
}

.item {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.flex.cloum {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.item .text {
    /* background-color: #98bcee; */
    font-weight: bold;
    /* padding: 10px 25px; */
    margin-bottom: 10px;
    width: 200px;
    text-align: center;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item .num {
    /* background-color: #f0f0f0; */
    /* padding: 10px 25px; */
    width: 100px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex {
    display: flex;
    align-items: center;
}
</style>